<template>
  <ContentWrap>
    <!-- 人民币账户信息 -->
    <div class="account-section">
      <h3 class="section-title">人民币账户信息</h3>
      <el-form
        :model="formData"
        ref="formRef"
        label-width="140px"
        :rules="rules"
        class="compact-form"
        label-position="left"
      >
        <el-row :gutter="30">
          <!-- 左侧部分 -->
          <el-col :span="12">
            <el-form-item label="收款人：" prop="rmbRecipient" required>
              <el-input v-model="formData.rmbRecipient" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="收款人地址：" prop="rmbRecvAddress" required>
              <el-input v-model="formData.rmbRecvAddress" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="联系电话：" prop="rmbContactPhone" required>
              <el-input v-model="formData.rmbContactPhone" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
          </el-col>
          <!-- 右侧部分 -->
          <el-col :span="12">
            <el-form-item label="开户行：" prop="rmbBankOpen" required>
              <el-input v-model="formData.rmbBankOpen" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="银行账号：" prop="rmbBankNo" required>
              <el-input v-model="formData.rmbBankNo" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="开户行网点：" prop="rmbBankOpenAddr" required>
              <el-input v-model="formData.rmbBankOpenAddr" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 美元账户信息 -->
    <div class="account-section">
      <h3 class="section-title">美元账户信息</h3>
      <el-form
        :model="formData"
        ref="formRef"
        label-width="140px"
        :rules="rules"
        class="compact-form"
        label-position="left"
      >
        <el-row :gutter="30">
          <!-- 左侧部分 -->
          <el-col :span="12">
            <el-form-item label="受益人：" prop="dollarBeneficiary" required>
              <el-input v-model="formData.dollarBeneficiary" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="银行账号：" prop="dollarBankNo" required>
              <el-input v-model="formData.dollarBankNo" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="联系电话：" prop="dollarContactPhone" required>
              <el-input v-model="formData.dollarContactPhone" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
          </el-col>
          <!-- 右侧部分 -->
          <el-col :span="12">
            <el-form-item label="开户行：" prop="dollarBankOpen" required>
              <el-input v-model="formData.dollarBankOpen" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="开户行网点：" prop="dollarBankOpenAddr" required>
              <el-input v-model="formData.dollarBankOpenAddr" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
            <el-form-item label="SWIFT/BIN NO：" prop="dollarSwiftNo" required>
              <el-input v-model="formData.dollarSwiftNo" placeholder="请输入" class="full-width-input"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="footer-actions">
      <el-button type="primary" @click="submitForm" :loading="formLoading" class="save-button">
        {{ formLoading ? '保存中...' : '保存' }}
      </el-button>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { SupplierAccountApi, SupplierAccountVO } from '@/api/busipart/supplieraccount'
import { ElMessage } from 'element-plus'
import { reactive, ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const formData = reactive({
  id: undefined as number | undefined,
  supplierId: 0,
  // 人民币账户
  rmbRecipient: '',
  rmbRecvAddress: '',
  rmbContactPhone: '',
  rmbBankOpen: '',
  rmbBankNo: '',
  rmbBankOpenAddr: '',
  // 美元账户
  dollarBeneficiary: '',
  dollarBankNo: '',
  dollarContactPhone: '',
  dollarBankOpen: '',
  dollarBankOpenAddr: '',
  dollarSwiftNo: ''
})

const rules = {
  // 人民币账户校验规则
  rmbRecipient: [{ required: true, message: '请输入收款人', trigger: 'blur' }],
  rmbRecvAddress: [{ required: true, message: '请输入收款人地址', trigger: 'blur' }],
  rmbContactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  rmbBankOpen: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
  rmbBankNo: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
  rmbBankOpenAddr: [{ required: true, message: '请输入开户行网点', trigger: 'blur' }],
  // 美元账户校验规则
  dollarBeneficiary: [{ required: true, message: '请输入受益人', trigger: 'blur' }],
  dollarBankNo: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
  dollarContactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  dollarBankOpen: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
  dollarBankOpenAddr: [{ required: true, message: '请输入开户行网点', trigger: 'blur' }],
  dollarSwiftNo: [{ required: true, message: '请输入SWIFT/BIN NO', trigger: 'blur' }]
}

const formRef = ref()
const formLoading = ref(false)

// 加载供应商账户信息
const loadSupplierAccount = async () => {
  if (!supplierId.value) return

  formLoading.value = true
  try {
    const res = await SupplierAccountApi.getSupplierAccount(supplierId.value)
    if (res) {
      Object.assign(formData, res)
    } else {
      // 如果没有账户信息，初始化供应商ID
      formData.supplierId = supplierId.value
    }
  } catch (error) {
    console.error('加载账户信息失败:', error)
    ElMessage.error('加载账户信息失败')
  } finally {
    formLoading.value = false
  }
}

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate()
    formLoading.value = true

    if (formData.id) {
      // 更新现有账户
      await SupplierAccountApi.updateSupplierAccount(formData)
      ElMessage.success('更新成功')
    } else {
      // 创建新账户
      const res = await SupplierAccountApi.createSupplierAccount(formData)
      formData.id = res.id // 保存新创建的ID
     ElMessage.success('创建成功')
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    formLoading.value = false
  }
}

// 初始化加载数据
onMounted(() => {
  loadSupplierAccount()
})
// // 定义props
// const props = defineProps({
//   supplierId: {
//     type: Number,
//     required: true
//   }
// })

</script>

<style scoped>
.account-section {
  margin-bottom: 60px;
}

.section-title {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-left: 140px;
}

.footer-actions {
  margin-top: 10px;
  text-align: left;
}

.compact-form {
  max-width: 800px;
  margin: 0 auto;
}

.full-width-input {
  width: 100%;
}

.el-form-item__content {
  margin-left: 10px !important;
}

.save-button {
  width: 120px;
  height: 40px;
  font-size: 14px;
  text-align: left;
  margin-left: 140px;
}

.el-row {
  margin-bottom: 35px;
}
</style>
